<template>
  <div class="base-element-chart"
    :style="{
      top: elementInfo.top + 'px',
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
      height: elementInfo.height + 'px',
    }"
  >
    <div
      class="rotate-wrapper"
      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
    >
      <div 
        class="element-content"
        :style="`
          background-color: ${elementInfo.fill};
          border-radius: ${elementInfo.borderRadius}px;
          outline: ${elementInfo.outline?.width}px ${elementInfo.outline?.style} ${elementInfo.outline?.color}
        `"
      >
        <!-- <ElementOutline :width="elementInfo.width" :height="elementInfo.height" :outline="elementInfo.outline" /> -->
        <component :is="currentComponent" :width="elementInfo.width" :height="elementInfo.height"
          :type="elementInfo.chartType" :data="elementInfo.data" :options="elementInfo.options" :id="elementInfo.id"
          :themeColor="elementInfo.themeColor" :gridColor="elementInfo.gridColor" :legend="elementInfo.legend || ''">
        </component>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { PPTChartElement } from '@/types/slides'

import ElementOutline from '@/views/components/element/ElementOutline.vue'
import Chart from './AntvChart.vue'
import LineChart from './AntvLineChart.vue'

import BubbleChart from './AntvBubbleChart.vue'
import PieChart from './PieChart.vue'
import RadarChart from './AntvRadarChart.vue'
import TwMapChart from './AntvMapChartPreview.vue'
import ThMapChart from './Antv3dMapChartPreview.vue'

import { useScreenStore, useSlidesStore } from '@/store'

export default defineComponent({
  name: 'base-element-chart',
  components: {
    ElementOutline,
    Chart,
    LineChart,
    PieChart,
    BubbleChart,
    RadarChart
  },
  props: {
    elementInfo: {
      type: Object as PropType<PPTChartElement>,
      required: true,
    },
    needScaleSize: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const screenStore = useScreenStore()
    
    const currentComponent = computed(() => {
      if(screenStore.screening) {
        const cmap = {
          'bar': Chart,
          'line': LineChart,
          'pie': PieChart,
          'scatter': BubbleChart,
          'fold': RadarChart,
          '2dmap': TwMapChart,
          '3dmap': ThMapChart,
        }
        return cmap[props.elementInfo.chartType] || null
      }
    })
    return {
      currentComponent,
      chartWidth: computed(() => props.needScaleSize ? props.elementInfo.width * 10 : props.elementInfo.width),
      chartHeight: computed(() => props.needScaleSize ? props.elementInfo.height * 10 : props.elementInfo.height),
    }
  },
})
</script>

<style lang="scss" scoped>
.base-element-chart {
  position: absolute;
}
.rotate-wrapper {
  width: 100%;
  height: 100%;
}
.element-content {
  width: 100%;
  height: 100%;
}
.need-scale {
  zoom: .1;
}
</style>